<script lang="ts" setup>
import PrizePool from "./step/PrizePool.vue";
import {
  getActPageFlagsApi,
  getPageAreaApi,
  getCurrencysApi,
  getListStoreApi,
  getActBaseInfoApi, updPrizeSorted,
} from "@/api/activity";
import { deepClone } from "@/utils";
import { zoonType } from "./components/config";

const route = useRoute();

const pageAraeList = ref<Array<any>>([]),
  currentIndex = ref("0"),
  currencyList = ref([]),
  merchantList = ref([]);

let homePageConfig: Array<any> = [];

const activityId = computed(() => {
  return route.params.id;
});

const activityDetail = computed(() => {
  return { id: Number(activityId.value) };
});

const prizePoolType = (index: number) => {
  let config = pageAraeList.value[index].config;
  let subType = config.pageArea.subType;
  let poolList = zoonType[subType].prizePool || [];
  return poolList.map((item: any) => item.type);
};

// 获取活动基本信息和模板配置
const getActivityInfo = async () => {
  const rs = await getActBaseInfoApi({ id: activityId.value });
  if (rs.code == 200) {
    homePageConfig = JSON.parse(rs.payload.templatePage.pageConfig || "[]");
  }
};

// 获取活动所有区域
const getPageAraes = async () => {
  const rs = await getActPageFlagsApi({ id: activityId.value });
  if (rs.code == 200) {
    pageAraeList.value = rs.payload;
  }
};

// 获取活动区域详情
const getAreaDetail = async () => {
  let index = Number(currentIndex.value);
  const rs = await getPageAreaApi({
    actId: activityId.value,
    pageFlag: pageAraeList.value[index].pageFlag,
  });
  if (rs.code == 200) {
    pageAraeList.value[index].config = rs.payload;
    // 填充subType
    for (let i = 0; i < homePageConfig.length; i++) {
      let $el = homePageConfig[i];
      if (
        $el.pageConfig.$pageFlag === rs.payload.pageArea.pageFlag &&
        zoonType[$el.type]
      ) {
        pageAraeList.value[index].config.pageArea.subType = $el.type;
        break;
      }
    }
  }
};

// 切换tab
const tabChange = (name: string) => {
  let index = Number(name);
  if (pageAraeList.value[index].config) return;
  getAreaDetail();
};

// 获取代币类型
const getCurrency = async () => {
  const rs: any = await getCurrencysApi({ currentPage: 1, showCount: -1 });
  if (rs.code == 200) {
    currencyList.value = rs.payload;
  }
};

// 获取商家列表
const getMerchantList = async () => {
  const rs = await getListStoreApi();
  if (rs.code == 200) {
    merchantList.value = rs.payload.map((item: any) => ({
      ...item,
      label: item.storeName,
      value: item.storeUserId,
    }));
  }
};

const updatePrizeInfo = () => {
  getAreaDetail();
};

const handleDragUpdate = async (pool: any) => {
  const rs = await updPrizeSorted({
    prizeSorteds: pool.prizeInfos.map((item: {id: number, sorted: number}) => ({
      id: item.id,
      sorted: item.sorted
    }))
  })

  if (rs.code === 200) {
    ElMessage.success("排序更新成功")
  }
}

provide("activityBaseInfo", activityDetail);
provide("activityModel", "edit");
provide("currencyList", currencyList);
provide("merchantList", merchantList);
const router=useRouter()
const goBack=()=>{
  router.push('/activity/list')
}
onMounted(async () => {
  await getActivityInfo();
  await getPageAraes();
  await getAreaDetail();
  getCurrency();
  getMerchantList();
});
</script>
<template>
  <MainContent title="活动商品管理" back  :backFunc="true" @back="goBack()">
    <el-tabs v-model="currentIndex" @tab-change="tabChange">
      <el-tab-pane
        :label="area.name"
        v-for="(area, index) in pageAraeList"
        :key="area.pageFlag"
        :name="index"
      >
        <PrizePool
          ref="poolRef"
          v-if="area.config"
          v-model="area.config.prizeAreas"
          :poolType="prizePoolType(index)"
          :poolBaseInfo="zoonType[area.config.pageArea.subType].prizePool"
          :pageFlag="area.config.pageArea.pageFlag"
          @change="updatePrizeInfo"
          @drag-update="handleDragUpdate"
        ></PrizePool>
      </el-tab-pane>
    </el-tabs>
  </MainContent>
</template>
